import { useState } from "react";
import { useNavigate } from "react-router-dom";

import Regular from "./components/Regular";
import Advanced from "./components/Advanced";
import Special from "./components/Special";

import Modal from "@/components/Modal";

import Micons from "@/components/MIcons/index";

import "./index.scss";

const Task = () => {
  const [open, setOpen] = useState(false);

  /**
   * 打开弹窗
   */
  const openModal = () => {
    setOpen(true);
  };

  const navigate = useNavigate();

  function handleClick(url: string) {
    navigate(url);
  }

  //排行榜内容
  const leaderboards: any[] = [];

  // 模拟数据
  for (let i = 1; i < 72; i++) {
    leaderboards.push({
      id: i,
      name: "",
      value: Math.floor(Math.random() * 1000),
    });
  }
  const LeaderboardContent = (
    <div className="leaderboard-list-box">
      <ul>
        {leaderboards.map((item, i) => (
          <li key={item.id} className="item">
            <div className="item-box">
              <div className="left-box">
                <div className="sort">{i + 1 < 10 ? "0" + (i + 1) : i + 1}</div>
                <div className="user-photo">
                  <img src="/images/user.jpg" />
                </div>
                <div className="name">Elon Musk</div>
              </div>
              <div className="right-box">
                <img src="/images/coin.png" />
                <span className="num">{item.value}</span>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );

  return (
    <>
      <div className="task-container">
        {/* banner */}
        <div className="banner-box">
          <div className="leader-board" onClick={openModal}>
            <span className="name">Leaderboard</span>
            <span className="icon">
              <Micons type="extend" className="icon-gengduo" colorFill="#000" />
            </span>
          </div>
          <img src="./images/task_banner.png" />
        </div>
        <div className="task-title">
          <span className="name">Tasks</span>
          <div
            className="total"
            onClick={() => {
              handleClick("/task/record");
            }}
          >
            <span className="num">234</span>
            <span className="unit">H/s</span>
            <span className="icon">
              <Micons
                type="extend"
                className="icon-gengduo"
                colorFill="#a7a7a7"
              />
            </span>
          </div>
        </div>
        {/* 普通 */}
        <Regular handleClick={handleClick} />
        {/* 高级 */}
        <Advanced handleClick={handleClick} />
        {/* 特需 */}
        <Special handleClick={handleClick} />
      </div>
      {/* 弹窗 */}
      <Modal
        onClose={setOpen}
        open={open}
        title={<div className="leaderboard-title">Leaderboard</div>}
        content={LeaderboardContent}
      />
    </>
  );
};
export default Task;
